<template>
    <view class="regist-view">
        <view class="regist-left">
            <text v-for="(item,index) in department_data" :key="index" @click="selectDepartment(index,item._id)"
                :class="selectStyle==index ? 'addcolor' :' ' ">
                {{item.dep_ment}}
            </text>
        </view>
        <view class="regist-right">
            <block v-for="(item,index) in departmentChildren" :key="index">
                <view v-for="(dep,depIndex) in item.dep_ment_list " :key="depIndex" @click="selectDepchild(dep.dep_id)">
                    {{dep.dep_name}}
                </view>
            </block>
        </view>
    </view>
</template>

<script setup lang="ts">
import { Department, Reglist } from '@/public/decl-type';
import requestApi from "@/public/request";
import {
    onMounted,
    ref
} from 'vue'
let selectStyle = ref<number>();
//对应子科室数据
let departmentChildren = ref<Reglist[]>([])
interface RegData {
    data: { data: Reglist[] }
}
//获取对应子科室数据  
async function getChildrenlist(id: string) {
    const res = await requestApi.RegList({ id }) as RegData
    departmentChildren.value = res.data.data;
}
//选择子科室
function selectDepchild(id: string) {
    uni.navigateTo({
        url: '/pages/doctor/index?id=' + id
    })
}
//选择父科室
function selectDepartment(index: number, id: string) {
    selectStyle.value = index;
    getChildrenlist(id);
}
//父科室数据
let department_data = ref<Department[]>([]);//数组这样可以这样
interface DeparTmentData {
    data: { data: Department[] }
}
onMounted(async () => {
    //请求得到父科室数据
    const res = await requestApi.DeparTment() as DeparTmentData//类型断言
    department_data.value = res.data.data;
    selectDepartment(0, department_data.value[0]._id)//初始化页面
})
</script>

<style lang="scss">
.regist-view {
    display: flex;
    justify-content: space-between;
}

.regist-left {
    background-color: #f5f5f5;
    width: 200rpx;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    overflow: auto;
}

.regist-left text {
    display: block;
    padding: 25rpx;
}

.addcolor {
    background-color: #ffffff;
    color: #2c76ef;
}

.regist-right {
    padding-left: 200rpx;
    flex: 1;
}

.regist-right view {
    padding: 25rpx;
}
</style>